<template>
    <div>
        <h1>用户管理</h1>
        <!--弹出式表单-->
        <el-button @click="dialogShow = true">添加</el-button>
        <el-dialog title="用户信息" :visible.sync="dialogShow">
            <div>
                类型：<input type="text" v-model="attend.type"><br>
                时间：<input type="text" v-model="attend.time"><br>
                员工：
                <select v-model="attend.employeeId">
                    <option v-for="emp in employees" :key="emp.id" :value="emp.id">
                        {{emp.name}}
                    </option>
                </select>
                <button @click="saveAttend">保存</button>
            </div>
        </el-dialog>
        <!--数据表格-->
        <el-table stripe :data="attends" style="width: 100%">
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="类型"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.type }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="时间"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.time }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="员工姓名"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.employee.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="员工性别"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.employee.gender }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="员工年龄"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.employee.age }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="editAttend(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteAttend(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页按钮-->
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total" :page-size="size" :current-page="current" @current-change="loadAttends">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        name: "UserView",
        data(){
            return {
                attend:{"id":null,"employeeId":"","type":"","time":""},
                attends:[], //用户列表
                employees:[],
                current:1,
                total:0,
                size:5,
                pages:1,
                dialogShow: false //对话框显示
            }
        },
        methods:{
            //分页查询
            loadAttends(current){
                this.current = current;
                this.$http.get("/attend-page?current=" + this.current + "&size=" + this.size)
                    .then(result => {
                        console.log(result.data);
                        this.attends = result.data.data.records;
                        this.pages = result.data.data.pages;
                        this.total = result.data.data.total;
                    });
            },
            loadEmployees(){
                this.$http.get("/employees")
                    .then(result => {
                        console.log(result.data);
                        this.employees = result.data.data;
                    });
            },
            //保存用户
            saveAttend(){
                console.log(this.attend);
                //通过id是否为null，判断进行添加或更新
                if(this.attend.id == null){
                    this.$http.post("/attend",this.attend)
                        .then(result => {
                            if(result.data.data == "ok"){
                                this.loadAttends(this.current);
                            }
                        });
                }else{
                    this.$http.put("/attend",this.attend)
                        .then(result => {
                            if(result.data.data == "ok"){
                                this.loadAttends(this.current);
                            }
                        });
                }
                //清空文本框
                this.attend = {"id":null,"employeeId":"","type":"","time":""};
                this.dialogShow = false;
            },
            //点击用户进行显示
            editAttend(attend){
                this.attend = JSON.parse(JSON.stringify(attend));
                this.dialogShow = true;
            },
            deleteAttend(id){
                this.$http.delete("/attend/" + id)
                    .then(result => {
                        if(result.data.data == "ok"){
                            this.loadAttends(this.current);
                        }
                    })
            }
        },
        mounted() {
            this.loadAttends(1);
            this.loadEmployees();
        }
    }
</script>

<style scoped>

</style>
